﻿@{
    ViewBag.Title = "Home Page";
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SignalR + XMPP Chat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.5/signalr.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }

        #chatbox {
            width: 50%;
            height: 300px;
            border: 1px solid #ccc;
            overflow-y: auto;
            padding: 10px;
            margin: 20px auto;
            background: #f9f9f9;
        }

        input, button {
            padding: 10px;
            margin: 5px;
        }

        .message {
            text-align: left;
            margin-bottom: 10px;
        }

            .message .user {
                font-weight: bold;
                color: #007bff;
            }

            .message .text {
                background: #e1f5fe;
                display: inline-block;
                padding: 5px 10px;
                border-radius: 5px;
            }
    </style>
</head>
<body>

    <h2>SignalR + XMPP Chat</h2>

    <div>
        <input type="text" id="username" placeholder="输入用户名">
        <button onclick="connect()">连接服务器</button>
    </div>

    <div id="chatbox"></div>

    <div>
        <input type="text" id="message" placeholder="输入消息">
        <button onclick="sendMessage()">发送</button>
    </div>

    <script>
        let connection = null;
        let username = "";

        // 连接 SignalR
        function connect() {
            username = document.getElementById("username").value.trim();
            if (!username) {
                alert("请输入用户名");
                return;
            }

            connection = new signalR.HubConnectionBuilder()
                .withUrl("/chatHub") // 确保后端 SignalR 路径正确
                .configureLogging(signalR.LogLevel.Information)
                .build();

            // 监听 SignalR 服务器广播的消息（包括 XMPP 转发来的消息）
            connection.on("ReceiveMessage", (user, message) => {
                displayMessage(user, message);
            });

            // 连接到 SignalR 服务器
            connection.start()
                .then(() => {
                    console.log("已连接到 SignalR 服务器");
                })
                .catch(err => {
                    console.error("连接失败: ", err);
                    alert("SignalR 连接失败，请检查服务器");
                });
        }

        // 发送消息到 SignalR（会被转发到 XMPP）
        function sendMessage() {
            let message = document.getElementById("message").value.trim();
            if (!message) {
                alert("请输入消息");
                return;
            }

            if (!connection || connection.state !== "Connected") {
                alert("请先连接服务器！");
                return;
            }

            connection.invoke("SendMessage", username, message)
                .then(() => {
                    console.log("消息已发送");
                    document.getElementById("message").value = "";
                })
                .catch(err => {
                    console.error("发送消息失败: ", err);
                    alert("发送失败，请检查服务器");
                });
        }

        // 显示消息到聊天框
        function displayMessage(user, message) {
            let chatbox = document.getElementById("chatbox");
            let msgDiv = document.createElement("div");
            msgDiv.classList.add("message");

            msgDiv.innerHTML = `<span class="user">${user}：</span> <span class="text">${message}</span>`;
            chatbox.appendChild(msgDiv);
            chatbox.scrollTop = chatbox.scrollHeight;
        }
    </script>

</body>
</html>
